<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <script src="./js/bootstrap.bundle.min.js"></script>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.6/purify.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h2>JQUERY 网页调试</h2>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-warning p-4">
    <div class="accordion accordion-flush" id="guizhelan">
        <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                  首页规则
                </button>
            </h2>
            <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#guizhelan">
                <div class="accordion-body">
                    <!-- 首页规则内容 -->
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">站名：</p><input id="zhanming"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">网址：</p><input id="wangzhi"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">列表：</p><input id="liebiao"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">标题：</p><input id="biaoti"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">链接：</p><input id="lianjie"class="col-9"/></div>
                    <div class="row col-12 bg-secondary justify-content-md-center p-3">
                        <button id="tiaoshi" type="button" class="col-3 btn btn-primary ms-auto">调试</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                  内容页规则
                </button>
            </h2>
            <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#guizhelan">
                <div class="accordion-body">
                    <!-- 内容页规则内容 -->
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">网址：</p><input id="nr_wangzhi"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">列表：</p><input id="nr_liebiao"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">标题：</p><input id="nr_biaoti"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">内容：</p><input id="nr_neirong"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">链接：</p><input id="nr_lianjie"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">图片：</p><input id="nr_tupian"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">其他：</p><input id="nr_qita"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">下页：</p><input id="nr_xiaye"class="col-9"/></div>
                    <div class="row col-12 bg-secondary justify-content-md-center p-3">
                        <button id="nr_tiaoshi" type="button" class="col-3 btn btn-primary ms-auto">调试</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                  详情页规则
                </button>
            </h2>
            <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#guizhelan">
                <div class="accordion-body">
                    <!-- 详情页规则内容 -->
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">网址：</p><input id="xq_wangzhi"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">列表：</p><input id="xq_liebiao"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">标题：</p><input id="xq_biaoti"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">内容：</p><input id="xq_neirong"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">链接：</p><input id="xq_lianjie"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">图片：</p><input id="xq_tupian"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">其他：</p><input id="xq_qita"class="col-9"/></div>
                    <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">下页：</p><input id="xq_xiaye"class="col-9"/></div>
                    <div class="row col-12 bg-secondary justify-content-md-center p-3">
                        <button id="xq_tiaoshi" type="button" class="col-3 btn btn-primary ms-auto">调试</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                  播放页规则
                </button>
            </h2>
            <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#guizhelan">
                <div class="accordion-body">
                    播放页规则内容
                </div>
            </div>
        </div>
    </div>
    

            <button id="quchu" type="button" class="col-3 btn btn-primary ">取出</button>
            <button id="baochun" type="button" class="col-3 btn btn-primary ">保存</button>

    <!-- 暂时没有用 
        <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">网址：</p><input id="wangzhi"class="col-9"/></div>
        <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">列表：</p><input id="liebiao"class="col-9"/></div>
        <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">标题：</p><input id="biaoti"class="col-9"/></div>
        <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">内容：</p><input id="neirong"class="col-9"/></div>
        <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">链接：</p><input id="lianjie"class="col-9"/></div>
        <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">图片：</p><input id="tupian"class="col-9"/></div>
        <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">其他：</p><input id="qita"class="col-9"/></div>
        <div class="row col-12 bg-secondary p-1"><p class="col-3 h5 text-center text-light">下页：</p><input id="xiaye"class="col-9"/></div>
        <div class="row col-12 bg-secondary justify-content-md-center p-3">
            <button id="quchu" type="button" class="col-3 btn btn-primary ms-auto ">取出</button>
            <button id="baochun" type="button" class="col-3 btn btn-primary ms-auto">保存</button>
            <button id="tiaoshi" type="button" class="col-3 btn btn-primary ms-auto">调试</button>
        </div>
    -->
    </div>
    <div class="col-8 bg-success p-4">
        <div class="col-12 bg-light p-2"><textarea id="textarea" style="width: 100%; height: 400px; background-color: rgba(255,0,0,0.1);"></textarea></div>
        <div class="col-12 bg-secondary p-2">
        <div class="row">
            <div class="col-6 ">
                <textarea id="text1" style="width: 100%; height: 400px; background-color: rgba(255,0,0,0.1);"></textarea>
            </div>
            <div class="col-6 ">
                <textarea id="text2" style="width: 100%; height: 400px; background-color: rgba(255,0,0,0.1);"></textarea>
            </div>
        </div>
        </div>
    </div>
  </div>
</div>
<script>
//定义全局变量
var url=""
var myval=getval()
//菜单的全局变量 [{name:标题名,url:链接}]
var caidan=[]


//保存输入框内容到本地
function saveval(){
    var myval = { 
        zhanming:$("#zhanming").val(),
        wangzhi:$("#wangzhi").val(),
        liebiao:$("#liebiao").val(),
        biaoti:$("#biaoti").val(),
        lianjie:$("#lianjie").val(),
        
        nr_wangzhi:$("#nr_wangzhi").val(),
        nr_liebiao:$("#nr_liebiao").val(),
        nr_biaoti:$("#nr_biaoti").val(),
        nr_neirong:$("#nr_neirong").val(),
        nr_lianjie:$("#nr_lianjie").val(),
        nr_tupian:$("#nr_tupian").val(),
        nr_qita:$("#nr_qita").val(),
        nr_xiaye:$("#nr_xiaye").val(),
        
        xq_wangzhi:$("#xq_wangzhi").val(),
        xq_liebiao:$("#xq_liebiao").val(),
        xq_biaoti:$("#xq_biaoti").val(),
        xq_neirong:$("#xq_neirong").val(),
        xq_lianjie:$("#xq_lianjie").val(),
        xq_tupian:$("#xq_tupian").val(),
        xq_qita:$("#xq_qita").val(),
        xq_xiaye:$("#xq_xiaye").val()
        
    };
    localStorage.setItem('myval', JSON.stringify(myval));
    console.log("数据已保存")
    console.log(myval)
    
}

//取出本地内容并填回到输入框
function getval(){
    var myval = JSON.parse(localStorage.getItem('myval'));
    console.log(myval)
        $("#zhanming").val(myval.zhanming)
        $("#wangzhi").val(myval.wangzhi)
        $("#liebiao").val(myval.liebiao)
        $("#biaoti").val(myval.biaoti)
        $("#lianjie").val(myval.lianjie)
        
        $("#nr_wangzhi").val(myval.nr_wangzhi)
        $("#nr_liebiao").val(myval.nr_liebiao)
        $("#nr_biaoti").val(myval.nr_biaoti)
        $("#nr_neirong").val(myval.nr_neirong)
        $("#nr_lianjie").val(myval.nr_lianjie)
        $("#nr_tupian").val(myval.nr_tupian)
        $("#nr_qita").val(myval.nr_qita)
        $("#nr_xiaye").val(myval.nr_xiaye)
        
        $("#xq_wangzhi").val(myval.cq_wangzhi)
        $("#xq_liebiao").val(myval.xq_liebiao)
        $("#xq_biaoti").val(myval.xq_biaoti)
        $("#xq_neirong").val(myval.xq_neirong)
        $("#xq_lianjie").val(myval.xq_lianjie)
        $("#xq_tupian").val(myval.xq_tupian)
        $("#xq_qita").val(myval.xq_qita)
        $("#xq_xiaye").val(myval.xq_xiaye)
    console.log("数据已取出")
    return myval
}

//判断字符串类型 返回 HTML XML JSON Other
function getType(str) {
    // 检查是否为 HTML  
    if (/<(?:[a-z]+[^\/])?(?:\s+[a-z]+(?:\s*=\s*(?:".*?"|'.*?'|[^\s>]+))?)*\s*\/?>/i.test(str)) {return 'HTML';}
    
    // 尝试解析 JSON
    try {
        JSON.parse(str);
        // 检查是否为 JSON 格式的字符串
        if (/^{[$${},]*[}$$]*$/.test(str)) {
            return 'JSON';    
        }  
    } catch (e) {
        //console.log("不是json")
    }

    // 检查是否为 XML  
    try {    
        var parser = new DOMParser();    
        var xmlDoc = parser.parseFromString(str, "text/xml");    
        var xml = true;    
        if (xmlDoc.getElementsByTagName("parsererror").length > 0) {      xml = false;    }    
        if (xml) {      return 'XML';    }  
    } catch (e) 
    {    
        return 'Other';  
    }  
    //左右类型都不是
    return 'Other';
}

//校验网址是否正确，
function checkurl(url){
    //alert(url)
    try {
      var turl=new URL(url)
      //alert("ok")
      return true;
    } catch (e) {
        //alert(e.message)
        return false;
    }
}

//取标题   都用jquery的.text() 方法去
//规则处空为默认直接取  如果有内容 就先用 .find() 方法再取
function getlianjie(obj){
    var gz_lianjie=$("#lianjie").val()
    //空
    if(gz_lianjie===""){
        return $(obj).attr("href");
    }else if(gz_lianjie.includes("@@")){
        let gz=gz_lianjie.split("@@")
        return $(obj).find(gz[0]).attr(gz[1]);
    }else{
        // 没有 @@
        alert("链接规则错误，请检查！规则格式： 选择器@@属性名 ");
        return "";
    }
}

//取属性   都用jquery的.attr() 方法去
//规则处空为默认直接取.attr("href")  如果有内容则内容中必须含有@@ 就先用 .find() 方法再取
function gettit(obj){
    var gz_biaoti=$("#biaoti").val()
    //空
    if(gz_biaoti===""){return $(obj).text();}
    else {
        return $(obj).find(gz_biaoti).text();
    }
}

function mylog(str){
    let t=$("#text1").val()
    $("#text1").val(str+"\n"+t+"\n")
}

//主页调试
//1、首页只能拿到大分类，没有小分类链接
function tiaoshi(url){
    //先保存一下输入框数据
    saveval()
    //检查url是否正确
    if(checkurl(url)){
        $.get(url,function(data,status){
            if(status!='success'){alert("网页读取失败！")}
            else{
                mylog("获取到网页长度："+data.length)
                //判断字符串类型 可以用
                //var strtype=getType(data)
                //console.log(strtype)
                
                //读取网页之后处理
                //var hlong=data.length
                
                //处理栏目
                var gz_liebiao=$("#liebiao").val()
                
                $("#textarea").val(DOMPurify.sanitize(data))
                var list=$(data).find(gz_liebiao)
                //list是一个jquery对象,使用.each()遍历子元素
                //list.each(function(){console.log($(this).attr("data-original"))})
                $("#text2").val("")
                var dalei={}
                list.each(function(index){
                    
                    //var l = DOMPurify.sanitize(this).replace(/\s{2,}/g, '');
                    let biaoti=gettit(this).trim();
                    let lianjie=getlianjie(this);
                    let n=$("#text2").val();
                    //alert (l)
                    caidan.push({name:biaoti,lianjie:lianjie})
                    $("#text2").val(n+ "标题："+biaoti+"\n 链接："+lianjie+"\n")
                    //console.log( l)
                    })
                    //取标题 使用tag@@Text 形式
                    
                    //取链接
                mylog(" 获取列表个数:"+list.length)
                
            }
            
        });  
        
    }else{
        alert("请正确输入要调试的网址")
    }
        console.log(caidan)
}

//内容调试
function nr_tiaoshi(){
    var wangzhi=$("#wangzhi").val()
    var nr_wangzhi=$("#nr_wangzhi").val()
    if(nr_wangzhi!=""){
        //先保存一下输入框数据
        saveval()
        var nr_url=new URL(nr_wangzhi,wangzhi)
        console.log(nr_url)
        $.get(nr_url.href,function(data,status){
            if(status!='success'){alert("网页读取失败！")}
            else{
                var gz_liebiao=$("#nr_liebiao").val()
                
                $("#textarea").val(DOMPurify.sanitize(data))
                var list=$(data).find(gz_liebiao)
                //list是一个jquery对象,使用.each()遍历子元素
                //list.each(function(){console.log($(this).attr("data-original"))})
                $("#text2").val("")
                var dalei={}
                list.each(function(index){
                    
                    //var l = DOMPurify.sanitize(this).replace(/\s{2,}/g, '');
                    let biaoti=gettit(this).trim();
                    let lianjie=getlianjie(this);
                    let n=$("#text2").val();
                    //alert (l)
                    caidan.push({name:biaoti,lianjie:lianjie})
                    $("#text2").val(n+ "标题："+biaoti+"\n 链接："+lianjie+"\n")
                    //console.log( l)
                    })
                    //取标题 使用tag@@Text 形式
                    
                    //取链接
                $("#text1").html("获取网页长度："+data.length+"\n 获取列表个数:"+list.length)
                
            }
            
        });  
        
        
    }else{alert("调试内容网址不能为空！")}


        

}


// 网页加载结束后运行
$(document).ready(function(){
        alert(myval.zhanming)
    
    $("#quchu").on("click",function(){
    alert("取出按钮被点击。");
    getval();
  });
    $("#baochun").on("click",function(){
    alert("保存按钮被点击。");
    saveval();
  });
    $("#tiaoshi").on("click",function(){
    //alert("调试按钮被点击。");
    //tiaoshi($("#wangzhi").val())
    var myurl=$("#wangzhi").val() || "https://www.ddys9.com/"
    tiaoshi(myurl)
  });
    $("#nr_tiaoshi").on("click",function(){
    //alert("调试按钮被点击。");
    //tiaoshi($("#wangzhi").val())
    nr_tiaoshi()
  });
  //var url = new URL('https://example.com/path?query=string#hash')
});
</script>
</body>
</html>